<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <title></title>

        <!-- 1. Include CSS -->
        <link type="text/css" rel="stylesheet" href="css/jquery.nstSlider.css">

    </head>
    <body>
    <center>
       <div class="nstSlider" data-range_min="-127" data-range_max="127"
                       data-cur_min="0"     data-cur_max="0">

		    <div class="bar"></div>
		    <div class="leftGrip"></div>
		</div>
		<div class="leftLabel" />
    </center>
        <!-- 3. Add jQuery -->
        <script src="js/jquery-1.11.0.min.js"></script>

        <!-- 4. Add nstSlider.js after jQuery -->
        <script src="js/jquery.nstSlider.min.js"></script>

        <!-- 5. setup the slider! -->
        <script>
           $('.nstSlider').nstSlider({
			    "left_grip_selector": ".leftGrip",
			    "value_bar_selector": ".bar",
			    "value_changed_callback": function(cause, leftValue, rightValue) {
			        var $container = $(this).parent(),
			            g = 255 - 127 + leftValue,
			            r = 255 - g,
			            b = 0;
			        $container.find('.leftLabel').text(leftValue);
			        $(this).find('.bar').css('background', 'rgb(' + [r, g, b].join(',') + ')');
			    }
			});
        </script>
</div>
</body>
</html>
